﻿<!DOCTYPE html>
<html lang="en" ng-app="my.movie">
<head>
    <meta charset="UTF-8">
    <title>名单</title>
    <script src="./js/jquery.js"></script>
    <script src="./js/angular.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.css">
    <style>
        li {
            float: left;
        }

        body {
            padding-top: 50px;
        }
    </style>
</head>
<body ng-controller="mainController">

    <div class="container">
        <div class="row">
            <h1>邀请名单</h1>
        </div>
        <div class="row" style="padding-top: 30px;">
            <div class="col-xs-3">
                <div class="input-group">
                      <span class="input-group-addon">
                          姓名
                      </span>
                    <input type="text" ng-model="name" class="form-control" placeholder="输入姓名">
                </div>
            </div>
            <div class="col-xs-8">
                <div class="input-group">
                      <span class="input-group-addon">
                          电话
                      </span>
                    <input type="text" ng-model="phone" class="form-control" placeholder="输入电话">
                </div>
            </div>
            <div class="col-xs-1">
                <button ng-click="invite()" class="btn btn-success">邀请</button>
            </div>
        </div>

        <div class="row" style="padding-top: 30px;">
            <a class="btn btn-success btn-xs " href="#/all">显示全部</a>
            <a class="btn btn-success btn-xs " href="#/invite">显示邀请中</a>
            <a class="btn btn-success btn-xs " href="#/accept">显示已接受</a>
            <a class="btn btn-success btn-xs " href="#/refuse">显示已拒绝</a>
        </div>

        <div class="row" style="padding-top: 30px;">
            <table class="table table-bordered">
                <tr>
                    <th style="width: 50px">id</th>
                    <th style="width: 100px">姓名</th>
                    <th style="width: 150px">电话</th>
                    <th style="width: 100px">状态</th>
                    <th>操作</th>

                </tr>
                <tr ng-repeat="userinfo in nameList">
                    <td>{{$index+1}}</td>
                    <td>{{userinfo.name}}</td>
                    <td>{{userinfo.phone}}</td>
                    <td>{{userinfo.state}}</td>
                    <td>
                        <!--哪种方式好呢？-->
                        <button ng-if="userinfo.state == '邀请中'" ng-click="accept(userinfo)" class="btn btn-xs btn-success">
                            接受邀请
                        </button>
                        <button ng-if="userinfo.state == '邀请中'" ng-click="refuse(userinfo)" class="btn btn-xs btn-danger">拒绝邀请
                        </button>
                        <button ng-click="remove(userinfo)" class="btn btn-xs btn-default">删除</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <script src="./js/bootstrap.js"></script>
    <script src="./modelService.js"></script>

    <script>
        var model=[{
            name: '张三',phone: 18210725867,state: '邀请中'
        },{
            name: '李四',phone: 15223623015,state: '已接受'
        }];


        var app=angular.module('my.movie',[]);

        app.controller('mainController',function ($scope,$location) {
            $scope.nameList=model;

            $scope.invite=function () {
                var name=$scope.name;
                var phone=$scope.phone;

                var userinfo={name: name,phone: phone};

                var flag=1;

                if (!name||!phone) {
                    flag=0;
                }

                model.forEach(function (value) {
                    flag=flag&&(value.phone!=phone);
                });

                if (flag==1) {
                    model.push(userinfo);
                }else {
                    alert("数据不合法");
                }

                $scope.name='';
                $scope.phone='';
            };

            $scope.accept=function (userinfo) {
                userinfo.state='已邀请';
            };

            $scope.refuse=function (userinfo) {
                userinfo.state='已拒绝';
            };

            $scope.remove=function (userinfo) {
                var index=model.indexOf(userinfo);

                model.splice(index,1)
            };

            $scope.location=$location;

            $scope.$watch('location.path()',function (newValue,oldValue,scope) {
                switch (newValue) {
                    case "/all": $scope.nameList=model;
                        break;
                    case "/invite": $scope.nameList=model.filter(function (v) {
                        return v.state=='邀请中';
                    });
                        break;
                    case "/accept": $scope.nameList=model.filter(function (v) {
                        return v.state=='已接受';
                    });
                        break;
                    case "/refuse": $scope.nameList=model.filter(function (v) {
                        return v.state=='已拒绝';
                    });
                        break;
                }
            });

        });
    </script>
</body>
</html>